<template>
  <div id="seven-days-overdue" :style="style">
    <div class="bigscreen-voucher-table">
      <div class="bigscreen-voucher-table_title">
        <div
          v-for="item in tableTitle"
          :key="item.value"
          class="bigscreen-voucher-table_title_item"
          :style="{ width: item.width }"
        >
          {{ item.title }}
        </div>
      </div>
      <vue3-seamless-scroll
        class="bigscreen-voucher-table-content"
        :style="{ height: style.tableHeight }"
        :hover="true"
        :speed="0.2"
        :list="tableData"
        :wait-time="0"
        :single-height="100"
      >
        <div
          v-for="(item, index) in tableData"
          class="bigscreen-voucher-table-content-item"
        >
          <div
            v-for="itemCol in tableTitle"
            :style="{
              width: itemCol.width,
              color: getTableColStyle(itemCol, index),
            }"
            class="bigscreen-voucher-table-content-item-cell"
          >
            {{ item[itemCol.value] }}
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>
<script>
import Vue3SeamlessScroll from './ScrollTable.vue'
import { getFilingAlertBrief } from '@/api/filing'
import { getStyle } from "../utils/index";
export default {
  components: { Vue3SeamlessScroll },
  data() {
    return {
      style: {
        height: "325px",
        tableHeight: "180px",
      },
      tableTitle: [
        {
          title: '被反映人',
          width: '140px',
          value: 'name',
          color: '#fff',
          formatter: true
        },
        {
          title: '受理时间',
          width: '190px',
          value: 'startTime',
          color: '#fff'
        },
        {
          title: '逾期天数',
          width: '190px',
          value: 'exceedDays',
          color: '#fff'
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.getData()
    this.getComputedStyle();
    window.addEventListener("resize", this.getComputedStyle);
  },
  beforeDestroy() {},
  methods: {
    getComputedStyle() {
      const { height: cardHeight } = getStyle();
      this.style.height = `${cardHeight - 750}px`;
      this.style.tableHeight = `${(cardHeight - 750 - 50) }px`;
    },
    async getData() {
      const res = await getFilingAlertBrief()
      console.log(res)
      this.tableData = res.data
    },
    getTableColStyle(item, index) {
      if (!item.formatter) return item.color
      if (index == 0) return '#F87D80'
      if (index == 1) return '#F3A980'
      if (index == 2) return '#F0DA80'
    }
  }
}
</script>
<style>
#seven-days-overdue{
  width: 100%;
  height: 325px;
}
</style>
<style lang="scss" scoped>
.bigscreen-voucher-table {
  font-size: 14px;
  margin-top: 10px;
  &_title {
    display: flex;
    align-items: center;
    background: rgba(78, 90, 122, 0.4);
    border: 1px solid rgba(69, 77, 88, 0.4);
    padding: 5px 15px;
  }
  &-content {
    height: 180px;
    overflow-y: hidden;
    &-item {
      display: flex;
      align-items: center;
      padding: 5px 15px;
      background: rgb(28 57 61 / 50%);
      margin-top: 5px;
      position: relative;
      cursor: pointer;
      ::after {
        content: "";
        background: url(../assets/images/garbage-jiantou2.png);
        width: 8px;
        height: 13px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    &-item:hover {
      background: url(../assets/images/garbage-table-bg1.png) no-repeat;
      background-size: 100% 100%;
      ::after {
        content: "";
        background: url(../assets/images/garbage-jiantou1.png);
        width: 8px;
        height: 13px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
